<script lang="ts" setup>
    import {ref , reactive} from 'vue'
    
    let stringFns = reactive([
        {fnName : 'charAt' , remark : '返回指定索引位置的字符' , code : `let str='返回指定索引位置的字符';<br> let _str = str.charAt(1); <br>  console.log(_str); <br>  return _str ; ` , result:null},
        {fnName : 'charCodeAt' , remark : '返回指定索引位置字符的 Unicode 值' , code : `let str='返回指定索引位置字符的 Unicode 值';<br> code=str.charCodeAt(1); <br> return code; `},
        {fnName : 'concat' , remark : '连接两个或多个字符串，返回连接后的字符串' , code : `let str='连接两个或多个字符串'; <br> let _str = str.concat(',','返回连接后的字符串'); <br> return _str ; `},
        {fnName : 'endsWith' , remark : '判断当前字符串是否是以指定的子字符串结尾的（区分大小写）。' , code : `let str='判断当前字符串是否是以指定的子字符串结尾的（区分大小写）。' ; <br> let flg = str.endsWith('。'); <br> return flg;`},
        {fnName : 'fromCharCode' , remark : '将 Unicode 编码转为字符。' , code : `let a = String.fromCharCode(65); <br> return a;`},
        {fnName : 'indexOf' , require:true, remark : '返回某个指定的字符串值在字符串中首次出现的位置。' , code : `let str='返回某个指定的字符串值在字符串中首次出现的位置。'; <br> let index = str.indexOf('a'); <br> return index ;`},
        {fnName : 'includes' , remark : '查找字符串中是否包含指定的子字符串。' , code : `let str = '查找字符串中是否包含指定的子字符串。'; <br> let flg = str.includes('c'); <br> return flg ? 'true' :'false'; `},
        {fnName : 'lastIndexOf' , remark : '从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。' , code : `let str='从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。'; <br> let lastIndex = str.lastIndexOf('置') ; <br> return lastIndex ;`},
        {fnName : 'match' , require:true, remark : '查找找到一个或多个正则表达式的匹配。' , code : `let str ='abcdefg'; <br> let match = str.match('cd'); <br> return match ; `},
        {fnName : 'repeat' , remark : '复制字符串指定次数，并将它们连接在一起返回。' , code : `return 'aa'.repeat(3)`},
        {fnName : 'replace' , require:true, remark : '在字符串中查找匹配的子串，并替换与正则表达式匹配的子串。' , code : `let str='2024-10-31T20:20:00  2024-10-31T20:20:00 '; <br> return str.replace(/[T]/g,' ') `},
        {fnName : 'replaceAll' , remark : '在字符串中查找匹配的子串，并替换与正则表达式匹配的所有子串。' , code : `let str='2024-10-31T20:20:00  2024-10-31T20:20:00 '; <br> return str.replaceAll('T',' ') `},
        {fnName : 'search' , remark : '查找与正则表达式相匹配的值。' , code : `let str='2024-10-31T20:20:00  2024-10-31T20:20:00 '; <br> let flg = str.search(/[T]/) ; <br> return flg ? '有T':'无T'`},
        {fnName : 'slice' , require:true, remark : '提取字符串的片断，并在新的字符串中返回被提取的部分。' , code : `let str='2024-10-31T20:20:00' ; <br> let newStr = str.slice(0,10); <br> return newStr;`},
        {fnName : 'split' , require:true, remark : '把字符串分割为字符串数组。' , code : `let str='2024-10-31T20:20:00' ; <br> let newStr = str.split('T'); <br> return newStr ? newStr[0] : 'error';`},
        {fnName : 'startsWith' , remark : '查看字符串是否以指定的子字符串开头。' , code : `let str ='2024-10-31T20:20:00';<br> let flg = str.startsWith('2024') ; <br> return flg ? '2024开头' :'不是2024开头' `},
        {fnName : 'substr' , require:true, remark : '从起始索引号提取字符串中指定数目的字符。' , code : `let str ='2024-10-31T20:20:00';<br> return str.substr(0,10)`},
        {fnName : 'substring' ,require:true, remark : '提取字符串中两个指定的索引号之间的字符。' , code : `let str ='2024-10-31T20:20:00';<br> return str.substring(0,10)`},
        {fnName : 'toLowerCase' , remark : '把字符串转换为小写。' , code : `return 'ABABA'.toLowerCase();`},
        {fnName : 'toUpperCase' , remark : '把字符串转换为大写。' , code : `return 'ababa'.toLowerCase();`},
        {fnName : 'trim' , remark : '去除字符串两边的空白。' , code : `let str= '    12345   '; <br>let _str=str.trim() ; <br> return 'str的长度是：'+str.length + ' _str的长度是：'+ _str.length`},
        {fnName : 'trimLeft' , remark : '去除字符串左边的空白。' , code : `let str= '    12345   '; <br>let _str=str.trimLeft() ; <br> return 'str的长度是：'+str.length + ' _str的长度是：'+ _str.length`},
        {fnName : 'trimRight' , remark : '去除字符串右边的空白。' , code : `let str= '    12345   '; <br>let _str=str.trimRight() ; <br> return 'str的长度是：'+str.length + ' _str的长度是：'+ _str.length`},
        {fnName : 'toLocaleLowerCase' , remark : '根据本地主机的语言环境把字符串转换为小写。' , code : `return 'ABABA'.toLocaleLowerCase();`},
        {fnName : 'toLocaleUpperCase' , remark : '根据本地主机的语言环境把字符串转换为大写。' , code : `return 'ababa'.toLocaleUpperCase();`},
        {fnName : 'valueOf' , remark : '返回某个字符串对象的原始值。' , code : `return 'adfadf'.valueOf();`},
        {fnName : 'toString' , remark : '返回一个字符串。' , code : `return 'adfadf'.toString()`},
    ])

    let shortCodes = reactive([
        {
            remark : '条件赋值的短路求值' ,
            code : `
                let loggedInUser ; <br>
                let user = loggedInUser || {name:'Guest',isVerified:'false'} ; <br>
                let isVerified = user && user.isVerified ; <br>
                return isVerified ;
            ` ,
            result : null 
        },
        {
            remark :'解构以获得更清晰的代码' ,
            code : `
                let user = {name :'auq' ,location :'chengdu'} ; <br> 
                let { name , location} = user ; <br> 
                let colors =  ['red' , 'green' , 'blue'] ;<br>
                let [fColor , otherColor] = colors ; <br> 
                return { <br>
                    name , <br>
                    fColor <br>
                }
            ` ,
            result : null 
        },
        {
            remark :'可选链接以实现安全的属性访问' ,
            code : `
                let user = {  <br>
                    name :'auq ' , <br>
                    address : { <br>
                        city : 'chengdu'    <br>
                    }   <br>
                }   <br>
                return {    <br>
                    code : user.address?.code || '100000', <br>
                    city : user.address?.city  <br>
                } <br>
            ` ,
            result : null 
        },
        {
            remark :'默认参数简化函数定义' ,
            code : `
                function run (name='auq') { <br>
                    console.log(name); <br>
                    return name ; <br>
                } <br>
                let s = run() ; <br>
                return s;
            ` ,
            result : null 
        },
        {
            remark :'Array.from() 将对象转换为数组' ,
            code : `
                let li = document.querySelectorAll('li') ; <br> 
                console.log(82,li); <br>
                let liArray = Array.from(li) ; <br> 
                return liArray.length ; 
            ` ,
            result : null 
        },
        {
            remark :'模板文字，用于更清晰的字符串' ,
            code : `
                const name = 'Alice'; <br>
                const greeting = \`Hello, $\{name\}! How are you?\`; <br> 
                return greeting ;
            ` ,
            result : null 
        },
        {
            remark :'扩展运算符的强大功能' ,
            code : `
                const colors1 = ['red', 'green']; <br>
                const colors2 = ['blue', 'yellow']; <br>
                const allColors = [...colors1, ...colors2]; <br>
                return allColors ;
            ` ,
            result : null 
        },
        {
            remark :'动态属性名称' ,
            code : `
                const key = 'name'; <br>
                const user = { [key]: 'auq' }; <br>
                return user.name ;  // "Alice"
            ` ,
            result : null 
        },
        {
            remark :'' ,
            code : `` ,
            result : null 
        },
        {
            remark :'' ,
            code : `` ,
            result : null 
        },
        {
            remark :'' ,
            code : `` ,
            result : null 
        }
    ])
   
    const onHandler = item => {
        let code = item.code.replace(/<[a-zA-Z]{1,}>/g,'')
        console.log(45,code)
        let result = new Function(''+code)()
        // let result = eval(code)
        console.log(47,result)
        item.result = result

        setTimeout(()=>{
            item.result = null 
        },6e3)
    }
    


</script>


<template>
    <section>
        <h4> string prototype </h4>
        <ul>
            <li v-for="item in stringFns" key="item.fnName">
                <div class="flex flex-dir-c" v-if="item.fnName"    >
                    <div class="flex "> 
                        <p> {{ item.fnName }} : </p>
                        <p> {{ item.remark }}</p>
                    </div>
                    <DIV class="code flex">
                        <code v-html="item.code"> </code>
                        <div class="run">
                            <button v-if="!item.result" @click="()=>onHandler(item)">执行</button>
                            <span v-else style="color:red">{{ item.result }}</span>
                        </div>
                    </DIV>
                </div>
            </li>
        </ul>
        
        <div>
            在JavaScript中，以下几种情况会被判断为false：
            <p>布尔值‌：false。</p>   
            <p>数字‌:0。</p>
            <p>‌空字符串‌：''。 </p>
            <p>‌null‌。</p>    
            <p>‌undefined‌。</p>
            <p>‌NaN‌（非数值）。</p>    
            <p>‌空对象或空数组‌：虽然空对象和空数组在逻辑上可能看起来像是false，但实际上它们在JavaScript中被视为true。
            需要注意的是，字符串"false"在JavaScript中被视为true，因为它是一个字符串而不是布尔值。</p>
        </div>
        <ul>
            <li class="flex-dir-c" v-for="shortCode in  shortCodes" :key="shortCode.code"  >
                <template v-if="shortCode.remark"> 
                    <p> {{ shortCode.remark }}</p>
                    <div class="code flex">
                        <code v-html="shortCode.code"></code>
                        <div class="run">
                            <button v-if="!shortCode.result" @click="()=>onHandler(shortCode)">执行</button>
                            <span v-else style="color:red">{{ shortCode.result }}</span>
                        </div>
                    </div>
                </template>
            </li>
        </ul>
    </section>
</template>

<style>
    li {
        margin:10px;
    }
</style>